<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<jsp:include page="/includes/top.jsp"></jsp:include>
<div class="page-header">
	<h1></h1>
</div>
<!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">
		<div class="col-xs-6 col-md-6 panel" style="padding:0;margin:0;">
			<div class="panel-heading" style="text-align: center;">待分配角色</div>
			<table id="leftgrid"
				class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th data-column-id="roleName">角色名</th>
						<th data-column-id="description">角色描述</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
		<div class="col-xs-6 col-md-6 panel" style="padding:0;margin:0;">
			<div class="panel-heading" style="text-align: center;">已分配角色</div>
			<table id="rightgrid"
				class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th data-column-id="roleName">角色名</th>
						<th data-column-id="description">角色描述</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>
	<div class="col-xs-12">
		<div class="clearfix form-actions">
			<div class="col-md-offset-3 col-md-9">
				<button class="btn btn-info" type="button" id="save">
					<i class="icon-ok"></i> 保存
				</button>

				&nbsp; &nbsp; &nbsp;
				<button class="btn" type="reset" id="back">
					<i class="icon-undo"></i> 取消
				</button>
			</div>
		</div>
	</div>
</div>


<jsp:include page="/includes/bottom.jsp"></jsp:include>

<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
<script type="text/javascript">
	var userid = getQueryString("id");
	var leftd, right;
	$(document).ready(function() {
		ininfrom();
		$("#save").click(function() {
			savedata();
		});
		$("#back").click(function() {
			window.history.back();
		});
	});

	var ininfrom = function() {
		$.ajax({
			type : "post",
			url : "userRoleList",
			data : {
				userId : userid
			},
			dataType : "json",
			success : function(data) {
				leftd = data.left;
				right = data.right;
				renderGrid(leftd, right);
			}
		});
	};

	var renderGrid = function(leftd, rightd) {
		createTR("#leftgrid", leftd);
		createTR("#rightgrid", rightd);
		$("#leftgrid tbody tr").click(function() {
			var index = $(this).attr("index");
			rightd.push(leftd[index]);
			leftd.splice(index, 1);
			renderGrid(leftd, rightd);
		});
		$("#rightgrid tbody tr").click(function() {
			var index = $(this).attr("index");
			leftd.push(rightd[index]);
			rightd.splice(index, 1);
			renderGrid(leftd, rightd);
		});
	};

	var createTR = function(uid, data) {
		if (typeof (data) == "object") {
			var tbody = $(uid).find("tbody").html("");
			for (var i = 0; i < data.length; i++) {
				var tr = $("<tr index=" + i + "></tr>").append(
						"<td>" + data[i].roleName + "</td>").append(
						"<td>" + data[i].roleDescription + "</td>");
				tbody.append(tr);
			}
		}
	};

	var savedata = function() {
		var roledata = new Array();
		for (var i = 0; i < right.length; i++) {
			var o = new Object();
			o.name = "dataList[" + i + "].roleId";
			o.value = right[i].roleId;
			roledata.push(o);
		}
		var u = new Object();
		u.name = 'userId';
		u.value = userid;
		roledata.push(u);
		$.ajax({
			type : "post",
			url : "addUserRoles",
			data : roledata,
			dataType : "json",
			success : function(data) {
				alert("保存成功");
			}
		});
	};
</script>



